<template>
  <div>
      <h2>=========vue中响应式的数组方法/$event/扩展运算符=============</h2>
      <h2>{{ msg }}</h2>
      <button @click="cli">系统的event对象</button>
      <button @click="cli0(123,$event)">传参+系统的event对象</button>
      <br/>
      <ul>
        <li v-for="item in arr" :key="item">{{item}}</li>
      </ul>
      <br/>
      <button @click="opt">点击操作li</button>
    
      <Vmodel />
      <VmodelFix />
      <Tem />
      <Shopping />
      <registerZu />
      <TabBar />
  </div>
</template>

<script>
import Vmodel from './Vmodel.vue'
import VmodelFix from './VmodelFix.vue'
import Tem from './Tem.vue'
import Shopping from './Shopping.vue'
import registerZu from './registerZu.vue'

import TabBar from './TabBar.vue'

export default {
  name: 'hellobase',
  props: {
    msg: String
  },
  components: {
    Vmodel,
    VmodelFix,
    Tem,
    Shopping,
    registerZu,
    TabBar
  },
  data() {
    return {
      // count: 0
      arr:['c','b','a']
    }
  },
  methods:{
    cli(event) {//当调用方法不传参不加括号时，会自动调用浏览器产生的event对象
      console.log(event);
    },
    cli0(val,event) {//当需要调用浏览器的event对象又需要传参时。event+$符号
      console.log(val);
      console.log(event);
    },
    opt() {
      // 在vue中响应式的数组方法：

      // this.arr.push('fff')//数组尾部添加元素--可添加多个
      // this.arr.unshift('aaa')//在数组头部添加元素--可添加多个

      // this.arr.pop()//数组尾部删除一个元素
      // this.arr.shift()//数组头部删除一个元素

      // splice(index,num)//从数组下标index处开始【删除】num个元素;  splice(index)表示从下标开始删除后面所有元素
      // splice(index,num,val)从数组下标处开始删除num个元素并【插入】一个元素val;  splice(index,2,'m','n')表示从数组下标处开始删除两个元素，并插入两个元素m n
      // splice(index,0,val)//从数组下标处【替换】一个元素

      // this.arr.sort()//排序  比如数组顺序cba,排序后会变成abc

      // reverse()//取反

      //==========以上数组方法会响应式改变页面渲染内容

      // vue还提供一个set方法用来响应式地修改对象
      Vue.set(this.arr,0,'aaa')//表示将数组的0下标元素修改为aaa

      // ================
      // this.arr[0]='aaa'//通过数组索引值直接修改数组元素，在页面上不会响应式改变渲染内容
    }
  }
}

function sum(...num) {//扩展运算符  javascript 
  console.log(num);

}
sum(1,2,3,4,5,6,7,8,44,22,33,809)

</script>
